<template>
  <div class="container">
    <div class="box1">
      <span>输入搜索</span>
      <el-input
        v-model="keyword"
        placeholder="请输入用户昵称或手机号......"
        clearable
      />
    </div>
    <div class="box2">
      <span>上次消费时间</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <div class="box3">
      <el-button type="primary" @click="searchHander" class="btn">查询</el-button>
      <el-button type="primary" class="btn1">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value1: ''
    }
  },
  methods: {
    searchHander() {
      this.$emit('parentsearch', this.keyword)
    }
  }
}
</script>

<style lang="scss" scoped>
    .container{
        display: flex;
        height: 64px;
        background-color: #fff;
        padding-left: 30px;
        margin-bottom: 20px;
        align-items: center;
        .box1{
            display: flex;
            margin-right: 30px;
            span{
                width: 100px;
                line-height: 36px;
                // margin-right: 8px;
            }
        };
      .box2{
         display: flex;
            margin-right: 30px;
            span{
                width: 100px;
                line-height: 36px;
                margin-right: 8px;
            }
      };
      .box3{
         .btn{
          margin-right: 30px;
          font-weight: 600;
         };
        .btn1{
          color: black;
          font-weight: 600;
          background-color: #fff;
          border-color: #eef1f5;
        }
      }
    };
    .container span{
      font-weight: 600;
    }
    
</style>
